{% extends "billing/layout.html" %}
{% block title %}
    Home
{% endblock %}
{% block content %}
    <div class="page-header">
        <h1>首页预览</h1>
    </div>

    <div class="row">
        <div id="panel-summary" class="col-md-6"></div>
        <div id="panel-account" class="col-md-6"></div>
        <div id="panel-service" class="col-md-4"></div>
        <div id="pie-service" class="col-md-8">
            <div class="panel panel-success">
                <div class="panel-heading">Service</div>
                <div class="chart-dom"></div>
            </div>
        </div>
        <div id="panel-subscription" class="col-md-4"></div>
        <div id="pie-subscription" class="col-md-8">
            <div class="panel panel-success">
                <div class="panel-heading">Subscription</div>
                <div class="chart-dom"></div>
            </div>
        </div>
    </div>
{% endblock %}

{% load static %}
{% block script %}
<script type="text/javascript" src="{% static 'echarts/themes/essos.js' %}"></script>
<script>
    
    $(function () {
        fetchPanel('panel-summary', "{% url 'billing:panel_last_summary' %}");
        fetchPanel('panel-account', "{% url 'billing:panel_account' %}");
        fetchTop10('panel-service', "{% url 'billing:panel_top_service' %}", 'pie-service', "{% url 'billing:pie_service' %}");
        fetchTop10('panel-subscription', "{% url 'billing:panel_top_subscription' %}", 'pie-subscription', "{% url 'billing:pie_subscription' %}");
    });

    function fetchPanel(id, url) {
        $.ajax({
            type: "GET",
            url: url,
            dataType: 'html',
            success: function (result) {
                document.getElementById(id).innerHTML = result
            },
        });
    }

    function fetchTop10(id_panel, url_panel, id_pie, url_pie) {
        var ajax_panel = $.ajax({
            type: "GET",
            url: url_panel,
            dataType: 'html',
            success: function (result) {
                $('#'+id_panel).html(result);
            }
        });
        $.when(ajax_panel).done(function () {
            var chartHeight = $('#'+id_panel+' .panel').height() - $('#'+id_panel+' .panel-heading').outerHeight();
            var chartDom = $('#'+id_pie+' .chart-dom')[0];
            $(chartDom).height(chartHeight);
            var chart = echarts.init(chartDom, 'essos', {renderer: 'canvas'});
            $.ajax({
                type: "GET",
                url: url_pie,
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result.data);
                }
            });
        })
    }

</script>
{% endblock %}
